import React, { useEffect } from "react";
import Navbar from "../../compoents/Navbar";
import { useNavigate } from "react-router-dom";
import request from "../../api/request";
import { Button, SearchBar,CapsuleTabs  } from "antd-mobile";
import { Tabs } from "antd-mobile";
import style from './index.module.css'
function Index() {
  const navigate = useNavigate();

  const [dalist, setDalist] = React.useState<any>([]);

  const getDetail = async () => {
    const res = await request.get("/api/restorative/type");
    console.log("111", res);
    if(res.code === 200){
      setDalist(res.data)
    }
  };

  useEffect(() => {
    getDetail();
  }, []);
  return (
    <div>
      <Navbar title="线上药房" showBack onBack={() => navigate(-1)} />
      <div style={{ marginTop: 46 }}>
        <div className={style.searchHead}>
          <SearchBar className={style.searchInput} placeholder="请输入内容" style={{ width: "60vw" }} />
          <Button className={style.searchBtn} size='small'   color="primary">搜索</Button>
          <span className={style.shop}>🛒</span>
        </div>

        <div>

          <Tabs>
            {dalist.length > 0 && dalist.map((item,index)=>(
              <Tabs.Tab title={item.restorativesstatename} key={index}>
              
            </Tabs.Tab>
            ))}
            
          </Tabs>

          {/* <CapsuleTabs>
          <CapsuleTabs.Tab title='水果' key='fruits'>
            菠萝
          </CapsuleTabs.Tab>
        </CapsuleTabs> */}

        </div>
      </div>
    </div>
  );
}

export default Index;
